<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>jq轮播图</title>
    <style>
        section{
            width: 520px;
            margin: 0 auto;
        }
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul{
        position: relative;
    }
    li{
        position: absolute;
    }
    .active{
        z-index: 10;
    }
    .div{
        text-align: center;
        position: absolute;
        /* display: flex; */
        top: 260px;
        left: 200px;
        width: 100px;
        height: 20px;
        line-height: 20px;
        background-color: yellow;
        z-index: 11;
    }
    ul .div span{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: black;       
    }
    p.left{
        text-align: center;
        display: inline-block;
        width: 50px;
        height: 80px;
        font-size: 50px;  
        line-height: 80px;      
        position: absolute;
        top: 100px;
        left: 0;
        z-index: 20;
        background-color: gray;
    }
    p.right{
        text-align: center;
        display: inline-block;
        width: 50px;
        height: 80px;
        line-height: 80px;      
        font-size: 50px;
        position: absolute;
        top: 100px;
        right: 0;
        background-color: gray;
        z-index: 20;
    }
    p.xianshi{
        display: none;
    }
</style>
</head>
<body>
    <section>
        <ul>
            <li class="active"><img src="../img/01.jpg" alt=""></li>
            <li><img src="../img/02.jpg" alt=""></li>
            <li><img src="../img/03.jpg" alt=""></li>
            <li><img src="../img/04.jpg" alt=""></li>
            <li><img src="../img/05.jpg" alt=""></li>
            <div class="div">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <p class="left xianshi">&lt;</p>
            <p class="right xianshi">&gt;</p>
        </ul>
    </section>
    <script src="./js/jquery.js"></script>
</body>
<script>
        var count = 0;
        var result = true;
        function show(){
            console.log(count);
            $('li').eq(count).toggleClass('active').siblings().removeClass('active'); 
        }
        function next(){
            count = count == 4 ? 0:count+1;
            show();
        }
        function shang(){
            count = count == 0 ? 4:count -1;
            show();
        }
        // 图片跟随鼠标变换
        var timer = setInterval(next,1000);
        $('span').mouseover(function(){
            // console.log($(this).index());
            clearInterval(timer);
            count = $(this).index();
            show();
        })
        $('span').mouseout(function(){
            timer = setInterval(next,1000);
        });
        // 鼠标进入
        $('ul').mouseover(function(){
            $(this).children('p').show();
            clearInterval(timer);
            timer = null;
        });
        $('ul').mouseout(function(){
            $(this).children('p').hide();
            if(!timer) timer = setInterval(next,1000);
        });
        // 按钮
        $('ul .left').click(function(ev){
           shang();           
        });
        $('ul .right').click(function(){
            next();
        })

    
</script>
</html>